<template>
  <div class="note-sidebar">
    <div class="header">
      <el-dropdown class="el-dropdown" @command="handleCommand">
        <span class="el-dropdown-link">
          {{ curBook.title }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in notebooks"
            :key="item.id"
            :command="item.id"
            >{{ item.title }}}</el-dropdown-item
          >
          <el-dropdown-item command="trash">回收站</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button size="small" @click="onAddNote">添加笔记</el-button>
    </div>
    <div class="menu">
      <span>更新时间</span>
      <span>标题</span>
    </div>
    <ul class="notes">
      <li v-for="note in notes" :key="note.id">
        <router-link :to="`/note?noteId=${note.id}&notebookId=${curBook.id}`">
          <span>{{ note.updatedAtFriendly }}</span>
          <span>{{ note.title ? note.title : '' }}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

export default {
  data() {
    return {}
  },
  created() {
    this.getNotebooks()
      .then(() => {
        this.setCurBook({ curBookId: this.$route.query.notebookId })
        return this.getNotes({ notebookId: this.curBook.id })
      })
      .then(() => {
        this.setCurNote({ curNoteId: this.$route.query.noteId })
        this.$router.replace({
          path: '/note',
          query: {
            noteId: this.curNote.id,
            notebookId: this.curBook.id,
          },
        })
      })
  },
  computed: {
    ...mapGetters(['notebooks', 'notes', 'curBook', 'curNote']),
  },
  methods: {
    ...mapMutations(['setCurBook', 'setCurNote']),
    ...mapActions(['getNotebooks', 'getNotes', 'addNote']),
    handleCommand(notebookId) {
      if (notebookId === 'trash') {
        return this.$router.push({
          path: '/trash',
        })
      }
      this.$store.commit('setCurBook', { curBookId: notebookId })
      this.getNotes({ notebookId }).then(() => {
        this.setCurNote()
        this.$router.replace({
          path: '/note',
          query: {
            noteId: this.curNote.id,
            notebookId: this.curBook.id,
          },
        })
      })
    },
    onAddNote() {
      this.addNote({ notebookId: this.curBook.id })
    },
  },
}
</script>

<style lang="scss" scoped>
.note-sidebar {
  width: 290px;
  border-right: 1px solid #ccc;
  background-color: #eee;
  height: 100%;
  .header {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ccc;
    background-color: #f7f7f7;
    width: 100%;
    padding: 0 6px;
    .el-dropdown {
      margin-right: auto;
      margin-left: auto;
    }
    .el-dropdown-link {
      font-size: 18px;
      font-weight: 400px;
    }
  }
  .menu {
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    display: flex;
    span {
      padding: 2px 10px;
      width: 100%;
    }
    :first-child {
      border-right: 1px solid #ccc;
    }
  }
  .notes {
    margin-top: 6px;
    li {
      width: 100%;
      a {
        width: 100%;
        display: flex;
        font-size: 12px;
        span {
          width: 100%;
          padding: 4px 10px;
        }
      }
      .router-link-exact-active {
        border: 2px solid #81c0f3;
        border-radius: 3px;
        width: 100%;
      }
    }
    li:nth-child(2n-1) {
      background-color: #f2f2f2;
    }
  }
}
</style>
